<template>
  <el-card>
    <template #header>
      <h2>用户管理</h2>
    </template>
    <UsersSearch
      v-model:searchValue="svalue"
      v-model:searchField="sfield"
      @search="
        page.currentPage = 1;
        searchUsers();
      "
    ></UsersSearch>

    <UsersTable ref="table"></UsersTable>

    <UsersPage ref="page" :total="table ? table.usersCount : 0" @change="searchUsers"></UsersPage>
  </el-card>
</template>
<script setup>
import { ref, shallowRef, computed } from 'vue';

import UsersTable from './components/UsersTable.vue';
import UsersSearch from './components/UsersSearch.vue';
import UsersPage from './components/UsersPage.vue';

const table = shallowRef(null);
const page = shallowRef(null);

// -----

const svalue = ref('');
const sfield = ref('username');

const where = computed(() => {
  if (svalue.value && sfield.value) {
    return { searchField: sfield.value, searchValue: svalue.value };
  }
  return {};
});

function searchUsers(e = {}) {
  table.value.getUsers({
    ...where.value,
    ...e,
  });
}
</script>
